<template>
  <section class="ml-20 multiple" :class="{'single-img':fileLength===1}">
    <div class="uploadAB ant-upload-list ant-upload-list-picture-card" v-for="item in fileList">
      <div class="ant-upload-list-picture-card-container">
        <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
          <div class="ant-upload-list-item-info">
            <a href="javascript:" class="ant-upload-list-item-thumbnail">
              <img :src="item.url+$utils.globalResizeImg()" class="ant-upload-list-item-image">
            </a>
          </div>
          <span class="ant-upload-list-item-actions">
              <a style="vertical-align: middle;" href="javascript:" title="预览文件" @click="handlePreview(item)">
                <a-icon class="anticon anticon-eye-o" type="eye"/>
              </a>
              <i v-if="fileLength" class="anticon anticon-delete" title="删除文件" @click="$emit('removeFile',item)">
                <a-icon type="delete"/>
              </i>
            </span>
        </div>
      </div>
    </div>
    <Upload
      v-if="fileLength"
      ref="upload"
      class="uploadAB"
      :scene="scene"
      :isSingleMore="true"
      @uploadSuccess="uploadAvatarSuccess">
      <div v-if="fileList.length<fileLength">
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">
          上传
        </div>
      </div>
    </Upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="margin-top:20px;width: 100%" :src="previewImage"/>
    </a-modal>
  </section>
</template>
<script>
  import Upload from '@/components/Upload'

  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    })
  }

  export default {
    name: 'MultipleShowList',
    props: {
      scene: {
        type: Number,
        default: 0
      },
      fileLength: {
        type: Number,
        default: 2
      },
      options: {
        type: Object,
        default: () => ({})
      }
    },
    components: {Upload},
    data() {
      return {
        isUpload: false,
        timer: null,
        seconds: 0,
        bucketDomain: '',
        filePath: '',
        ossClient: null,
        fileList: [],
        previewVisible: false,
        previewImage: ''
      }
    },
    methods: {
      handleChange({fileList}) {
        this.fileList = fileList
      },
      handleCancel() {
        this.previewVisible = false
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      uploadAvatarSuccess({path, thumbnailPath}) {
        this.fileList.push({
          thumbnailPath,
          name: 'image.png',
          status: 'done',
          url: path,
          uid: this.$utils.uuid()
        })
        this.$emit('uploadSuccess', this.fileList)
      },
      setFileList(data) {
        this.fileList = data
      }
    }
  }
</script>
<style lang="less" scoped>
  .multiple{display: flex;flex-wrap: wrap;}
  .uploadAB {
    /deep/ .ant-upload-picture-card-wrapper {
      display: flex;
    }

    /deep/ .ant-upload.ant-upload-select-picture-card, /deep/ .ant-upload-list-item, /deep/ .ant-upload-list-picture-card-container {
      width: 88px !important;
      height: 88px !important;
    }
  }

  .single-img {
    position: relative;
    width: 96px;
    height: 96px;

    .uploadAB {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }
</style>
